<template>
  <div ref="container" style="width:100%">
      <div class="number">NO.{{current+1}}</div>
      <div class="title">{{title[current]}}</div>
      <van-swipe @change="onChange" :width="width" :loop="false" class="swiper-container">
            <van-swipe-item @click="handleClick(1)"><img src="http://qnkf.laigl.com/20210420/feb79b41fd1a7ad961bd1a7dbc76537.png" alt=""></van-swipe-item>
            <van-swipe-item @click="handleClick(2)"><img src="http://qnkf.laigl.com/20210420/6e2f087e3dc7c91f21f8b013d1e947a.png" alt=""></van-swipe-item>
            <van-swipe-item @click="handleClick(4)"><img src="http://qnkf.laigl.com/20210420/12adb6d359bb9d949581f42ceea7227.png" alt=""></van-swipe-item>
            <van-swipe-item @click="handleClick(3)"><img src="http://qnkf.laigl.com/20210420/dbd59b9a3d1eb829d36b73c44d0d2ad.png" alt=""></van-swipe-item>
            <template #indicator>
                <div class="custom-indicator">
                    <div class="child" :style="getWidth"></div>
                </div>
            </template>
      </van-swipe>
  </div>
</template>

<script>
import { Toast } from 'Vant';
// import { Swiper, SwiperSlide } from 'swiper';
export default {
     data() {
    return {
      current: 0,
      width:"330",
      title:[
          "骨骼肌损伤",
          "功能改善",
          "慢性疾病",
          "特殊人群",
      ]
    };
  },
  mounted(){
       this.width =  this.$refs.container.clientWidth * 0.88;
  },
  computed: {   
      
      getWidth() {
          return {
            //   width:((this.current+1)*100/4 )+"%",
              width:"25%",
              marginLeft:((this.current)*11.8)+"vw"
          }
      }
  },
  components: {
    // Swiper,
    // SwiperSlide
  },
  methods: {
      handleClick(index){
          switch(Number(index)){
              case 1:
                    this.$router.push({
                        path: "/assessment", 
                        query:{
                            user_id:this.$route.query.user_id
                        }
                    });
                    break;
              case 2:
                    Toast("暂未开通")
                    break;
              case 3:
                    Toast("暂未开通")
                    break;
              case 4:
                    Toast("暂未开通")
                    break;
          }
      },
      onChange(index){
             this.current = index;
      }
  },
};
</script>

<style  scoped lang="less">
.number{
    margin:6.667vw 0 2.4vw 8.533vw;
    color: #eef0f0;
    font-size: 4vw;
    }
    .title{
        font-size: 6.133vw;
        color: #0f1837;
        margin-left: 8.533vw;
    }
.swiper-container{
    margin-left: 4.667vw;
    .van-swipe-item {
        padding: 4vw;
        box-sizing: border-box;
        // filter: blur(5px);
        box-shadow:5px -10px 5px 5px rgba(112, 112, 112 ,.04) inset;
    img{
        width: 100%;
    }
    
}
}
.custom-indicator{
        width: 47.2vw;
        margin: 0 auto;
        margin-top: 4.533vw;
        height: 3px;
        background-color: #f2f5f7;
        .child{
            height: 100%;
            background-color: #c5c9d4;
        }
    }

</style>